import AMapLoader from '@amap/amap-jsapi-loader';
import { useEffect } from 'react';

let map: any;
const Index = () => {
  useEffect(() => {
    AMapLoader.load({
      key: '8f961d3aa017ac1c4069ce032c92f4eb', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.Scale',
        'AMap.ToolBar',
        'AMap.Driving',
        'AMap.HawkEye',
        'AMap.Geolocation',
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          zoom: 14, //级别
          // center: [116.397428, 39.90923], //中心点坐标
          center: [120.26408, 30.305451], //中心点坐标
          viewMode: '3D', //使用3D视图
          mapStyle: 'amap://styles/blue', //设置地图的显示样式
        });

        // 路况图层 卫星图层
        // const satellite = new AMap.TileLayer.Satellite({
        //   zIndex: 10,
        // });
        // map.add(satellite); //添加图层到地图

        // 点标记
        const marker = new AMap.Marker({
          position: [120.26408, 30.305451], //位置
          title: '千锋',
          offset: new AMap.Pixel(-10, -10),
          icon: 'https://vdata.amap.com/icons/b18/1/2.png',
        });
        const marker2 = new AMap.Marker({
          position: [120.262631, 30.307861], //位置
          title: '千锋宿舍',
          offset: new AMap.Pixel(-10, -10),
          icon: 'https://vdata.amap.com/icons/b18/1/2.png',
        });
        map.add([marker, marker2]); //添加到地图

        // 矢量图形
        const lineArr = [
          [120.26408, 30.305451],
          [120.264246, 30.305755],
          [120.266344, 30.306036],
          [120.266365, 30.307861],
          [120.262631, 30.307861],
        ];
        const polyline = new AMap.Polyline({
          path: lineArr, //设置线覆盖物路径
          strokeColor: '#3366FF', //线颜色
          strokeWeight: 5, //线宽
          strokeStyle: 'solid', //线样式
        });
        map.add(polyline);

        const circle = new AMap.Circle({
          center: new AMap.LngLat(120.26408, 30.305451), // 圆心位置
          radius: 1000, // 圆半径 米
          fillColor: 'red', // 圆形填充颜色
          strokeColor: '#fff', // 描边颜色
          strokeWeight: 2, // 描边宽度
        });

        map.add(circle);

        map.on('click', (e: any) => {
          // console.log(e.lnglat.lng);
          const marker = new AMap.Marker({
            position: [e.lnglat.lng, e.lnglat.lat],
            offset: new AMap.Pixel(-10, -10),
            icon: 'https://vdata.amap.com/icons/b18/1/2.png',
          });
          map.add(marker);
        });
        circle.on('click', (e: any) => {
          // console.log(e.lnglat.lng);
          const marker = new AMap.Marker({
            position: [e.lnglat.lng, e.lnglat.lat],
            offset: new AMap.Pixel(-10, -10),
            icon: 'https://vdata.amap.com/icons/b18/1/2.png',
          });
          map.add(marker);
        });

        // 添加地图插件
        AMap.plugin('AMap.ToolBar', function () {
          //异步加载插件
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
        });
        AMap.plugin('AMap.HawkEye', function () {
          //异步加载插件
          map.addControl(new AMap.HawkEye({ isOpen: true }));
        });
        AMap.plugin('AMap.Geolocation', function () {
          //异步加载插件
          map.addControl(new AMap.Geolocation());
        });
        AMap.plugin('AMap.Scale', function () {
          //异步加载插件
          var scale = new AMap.Scale();
          map.addControl(scale);
        });
        AMap.plugin('AMap.Driving', function () {
          //异步加载插件
          var driving = new AMap.Driving({
            // map: map,
            // panel: 'panel',
            // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
            policy: AMap.DrivingPolicy.LEAST_TIME,
          }); //驾车路线规划
          driving.search(
            [120.26408, 30.305451],
            [120.43147, 30.234711],
            (status: any, result: any) => {
              // console.log('status:', status);
              // console.log('result:', result);
              if (status === 'complete') {
                const { origin, routes } = result;
                const lineArr = [[origin.lng, origin.lat]];
                const { steps } = routes[0];
                steps.forEach((item: any) => {
                  lineArr.push([item.end_location.lng, item.end_location.lat]);
                });
                const polyline = new AMap.Polyline({
                  path: lineArr, //设置线覆盖物路径
                  strokeColor: '#3366FF', //线颜色
                  strokeWeight: 5, //线宽
                  strokeStyle: 'solid', //线样式
                });
                map.add(polyline);
                // 自动适配
                map.setFitView();
              }
            },
          );
        });

        map.on('complete', function () {
          // 地图图块加载完成后触发
          console.log('地图加载完成');
          console.log(
            new AMap.LngLat(120.26408, 30.305451).distance(
              new AMap.LngLat(120.43147, 30.234711),
            ),
          );
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      console.log('地图被销毁了');
      map.destroy();
    };
  }, []);

  return (
    <div>
      <div id="container" style={{ height: 400 }}></div>
    </div>
  );
};

export default Index;
